<template>
	<view class="index_home">
		<view style="padding-top: 25px;  background-color:transparent;"></view>
		<view class="index_header">
			<view class="index_head_portrait"  @click="toAbout">
				<image src="../../static/img/stuent1.png" mode=""></image>
			</view>
			<text>
				{{name}}
			</text>
		</view>
		<!-- 轮播区域 -->
		<view class="lunbo">
			<swiper indicator-dots autoplay circular indicator-color="rgba(255,255,255)"
			 >
				<swiper-item style="background-image: url(../../static/img/head.png); background-size:cover;">
				</swiper-item>
				<swiper-item style="background-image: url(../../static/img/head.png); background-size: cover;">
				</swiper-item>
				<swiper-item style="background-image: url(../../static/img/head.png); background-size: cover;">
				</swiper-item>
			</swiper>
		</view>
		<text class="txt_practice">
			课程
		</text>
		<view class="index_contnet_study">
			<view class="study_electrical bg" @click="goElectrical('防爆电气课程学习')">
				<image src="../../static/img/training.png" mode="scaleToFill"></image>
				<text>防爆电气课程学习</text>
			</view>
			<view class="study_welder bg" @click="goWelder('焊工专业培训')" >
				<image src="../../static/img/training2.png" mode="scaleToFill"></image>
				<text>焊工专业培训</text>
			</view>
		</view>
		<text class="txt_practice">
			练习
		</text>
		<view class="index_content_practice">
			<view class="practice_electrical bg" @click="toPractice">
				<image src="../../static/img/practice.png" mode="scaleToFill"></image>
				<text>防爆电气</text>
			</view>
			<view class="practice_welder bg" @click="toPraWelder">
				<image src="../../static/img/practice2.png" mode="scaleToFill"></image>
				<text>焊工培训</text>
			</view>
			<view class="study_other bg"  >
				<image src="../../static/img/practice3.png" mode="scaleToFill"></image>
				<text>其他</text>
			</view>
		</view>
		<text class="txt_practice">
			错题重练
		</text>
		<view class="index_content_practice">
			<view class="practice_electrical bg" @click="toWrongExercises(1)">
				<image src="../../static/img/wrong.png" mode="scaleToFill"></image>
				<text>防爆电气</text>
			</view>
			<view class="practice_welder bg" @click="toWrongExercises(2)">
				<image src="../../static/img/wrong2.png" mode="scaleToFill"></image>
				<text>焊工培训</text>
			</view>
			<view class="study_other bg"  >
				<image src="../../static/img/wrong3.png" mode="scaleToFill"></image>
				<text>其他</text>
			</view>
		</view>
		<text class="txt_practice">
			考试
		</text>
		<view class="index_content_test">
			<view class="test bg" v-for="(item,index) in paperList" :key="item.id"  @click="paperHandle(item.id)">
				<view class="test_head"  :style="'background-color:'+ color[index]" >
				</view>
				<text class="font">{{item.studentStatus}}{{item.examName}}</text>
			</view>
		</view>
    </view>
</template>

<script>
	export default {
		name:'index',
		data() {
			return {
				token: '',
				name:'',
				paperList: [],
				color: ["#53B1F4","#55ff7f","#55aa00","#0055ff","##ffff7f"]
			}
		},
		onBackPress() {  
		   uni.showModal({
		     title: '提示',  
		     content: '是否退出海油培训？',  
		     success: function(res) {  
		         if (res.confirm) {  
		             // 退出当前应用，改方法只在App中生效  
		             plus.runtime.quit();  
		         } else if (res.cancel) {  
		             console.log('用户点击取消');  
		         }  
		     }  
		   });  
		   return true  
		},
		// 页面渲染前获取
		onLoad() {
			this.token = uni.getStorageSync('token')
			this.name = uni.getStorageSync('name')
			if (!this.token) {
				uni.navigateTo({
					url: '../loginpage/loginpage'
				})
				return;
			}
			this.getPaperList()
		},
		methods: {
			// 获取轮播图数据 
			async getSwipers() {
				// 第一种 普通的数据请求
				// 发起请求
				// uni.request({
				// 	url: 'http://localhost:8082/api/getlunbo',
				// 	// 请求成功后的数据
				// 	success(res) {
				// 		// console.log(res.data)
				// 		if (res.data.status !== 0) { 
				// 			// 提示获取数据失败！
				// 			return uni.showToast({
				// 				title: '获取轮播图数据失败！' 
				// 			})
				// 		}
				// 		// 成功   数据绑定
				// 		this.swipers = res.data.message
				// 		console.log(this.swipers)
				// 	}
				// })
				// 第二种
				// async 和 await 请求
				// const res = await uni.request({
				// 	url: 'http://localhost:8082/api/getlunbo',
				// })
				// console.log(res[1].data)
				// 第三种	自己封装的请求方法
				// const { data: res} = await this.$myRequest({
				// 	url: '/api/getlunbo'
				// })
			},
			goElectrical (tit) {
				uni.navigateTo({
					url: `/pages/training/training?title=${tit}`
				})
			},
			goWelder (tit) {
				uni.navigateTo({
					url: `/pages/training/welder?title=${tit}`
				})
			},
			toAbout(){
				uni.navigateTo({
					url: `/pages/about/about`
				})
			},
			paperHandle (id) {
				uni.request({
					url: 'http://exam.tutestudio.net/api/student/paper?id=' + id,
					method: 'GET',
					header: {
						token: this.token
					},
					success: (res) => {
						if (res.data.statusCode !== 200) {
							uni.showToast({
								title: res.data.errors,
								icon: 'none'
							})
							return;
						}
						uni.setStorageSync('paperDetail', JSON.stringify(res.data.data))
						if(res.data.data.status === 1){
							uni.navigateTo({
								url: `/pages/examnation/showExamResult/showExamResult`
							})
						}
						else{
							uni.navigateTo({
								url: `/pages/examnation/submitExam`
							})
						}
						
					},
					fail(err) {
						uni.showToast({
							title: '接口参数有误！',
							icon: 'none'
						})
					}
				})
			},
			toPractice(){
				uni.navigateTo({
					url: `/pages/practice/practice`
				})
			},
			toPraWelder(){
				uni.navigateTo({
					url: `/pages/practice/pra_welder`
				})
			},
			toWrongExercises(id){
				uni.navigateTo({
					url: '/pages/wrongExercises/wrongExercises?id='+id
				})
			},
			getPaperList () {
				uni.request({
					url: 'http://exam.tutestudio.net/api/student/paperList',
					method: 'GET',
					header: {
						token: this.token
					},
					success: (res) => {
						console.log(res.data.data)
						this.paperList = res.data.data
					},
					fail(err) {
						uni.showToast({
							title: '接口参数有误！',
							icon: 'none'
						})
					}
				})
			}
		},
	}
</script>

<style lang="scss">
	.index_home {
		height: 100vh;
		width: 750rpx;
		.index_header {
			position: relative;
			width: 100%;
			height: 80px;
			line-height: 80px;
			.index_head_portrait {
				top: 10px;
				left: 20px;
				position: absolute;
				width: 60px;
				border: 1px solid #eee;
				height: 60px;
				border-radius: 50px;
				image {
					height: 100%;
					width: 100%;
					//left: 10px;
				}
			}
			text {
				position: absolute;
				left: 100px
			}
		}
		.index_contnet_study {
			margin-top: 15px;
			width: 90%;
			height: 80px;
			margin-left: 5%;
			justify-content: space-between;
			line-height: 100px;
			text-align: center;
			
			display: flex;
			.study_electrical {
				border-radius: 3px;
				position: relative;
				overflow: hidden;
				width: 48%;
				image {
					height: 100%;
					
					width: 100%;
				}
				text{
					position: absolute;
					top: -10px;
					left: 20px;
					color: white;
					font-size: 16px ;
				}
				
				
			}
			.study_welder {
				border-radius: 3px;
				position: relative;
				overflow: hidden;
				width: 48%;
				image {
					height: 100%;
					
					width: 100%;
				}
				text{
					position: absolute;
					top: -10px;
					left: 30px;
					color: white;
					font-size: 16px ;
				}
			}
			
			
		}
		.txt_practice {
			display: inline-block;
			margin-top: 15px;
			font-size: 18px;
			margin-left: 5%;
			font-weight: bold;
			//font-family: "Adobe Heiti Std R";
		}
		.index_content_practice {
			margin-top: 15px;
			width: 90%;
			height: 95px;
			margin-left: 5%;
			justify-content: space-between;
			line-height: 60px;
			text-align: center;
			display: flex;
			.practice_electrical {
				border-radius: 5px;
				position: relative;
				overflow: hidden;
				width: 31%;
				image {
					margin-top: 22px;
					height: 25px;
					
					width: 25px;
				}
				text{
					position: absolute;
					top: 40px;
					left: 24px;
					color: black;
					font-size: 12px ;
					
				}
			}
			.practice_welder {
				width: 47%;
				border-radius: 5px;
				position: relative;
				overflow: hidden;
				width: 31%;
				image {
					margin-top: 22px;
					height: 25px;
					
					width: 25px;
				}
				text{
					position: absolute;
					top: 40px;
					left: 24px;
					color: black;
					font-size: 12px ;
					
				}
			}
			.study_other {
				width: 47%;
				border-radius: 5px;
				position: relative;
				overflow: hidden;
				width: 31%;
				image {
					margin-top: 22px;
					height: 25px;
					
					width: 25px;
				}
				text{
					position: absolute;
					top: 40px;
					left: 40px;
					color: black;
					font-size: 12px ;
					
				}
			}
		}
		.index_content_test {
			margin-top: 15px;
			width: 90%;
			margin-bottom: 30px;
			margin-left: 5%;
			text-align: left;

			.test_head{
				height: 50px;
				width: 6px;
				background-color: #53B1F4;
				float: left;
				border-radius: 10px;
			}
			.test {
				width: 100%;
				height: 50px;
				margin-top: 18px;
				line-height: 50px;
				border-radius: 5px;

			}
			.font {
				font-size: 14px;
				margin-left: 30px;
			}
		}
	}
	.bg {
		//border-radius: 10px;
		background-color: #e5e5e5;
	}
	.lunbo {
		height: 280rpx;
		width: 700rpx;
	border: 0px solid #eee;
	border-radius: 20px;
	margin-left: 25rpx;
	overflow: hidden;
		swiper {
			height: 300rpx;
			width: 100%;
	
			swiper-item {
				width: 100%;
				height: 100%;
	
				image {
					width: 100%;
					height: 100%;
					//margin-left: 5px;
					border-radius: 18rpx;
				}
			}
		}
		}
</style>
